<template>
  <base-load-page :loadState="false" :padding="0" background="rgba(0,0,0,0)" style="border-radius: 0; box-shadow: none">
    <el-scrollbar>
      <div class="main-box">
        <!-- 基础信息 -->
        <div class="card-box global-slide-up-animation" style="animation-delay: 0.05s">
          <div class="title-box">
            <span class="title">基础信息</span>
          </div>
          <div class="content-box">
            <el-form ref="editUserInfoFormRef" scrollToError style="width: 100%" statusIcon :model="editUserInfoFrom" :rules="editUserInfoRules">
              <div style="display: flex; flex-direction: row; justify-content: center; width: 100%">
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 90px">
                  <el-form-item label="" prop="avatar">
                    <rest-upload-qn
                      v-model="editUserInfoFrom.avatar"
                      folder="personal/avatar"
                      :width="90"
                      :height="90"
                      :accept="['.png', '.jpg', '.svg', '.webp']"
                      :limit="1"
                      :afterSelectFile="openCropper"
                    ></rest-upload-qn>
                  </el-form-item>
                  <span style="font-size: 12px; color: var(--el-text-color-regular)">头像</span>
                </div>
                <div style="flex: 1; max-width: 580px; margin-left: 10px">
                  <el-form-item label="账号" labelWidth="6em" prop="username" style="width: 100%; margin-bottom: 30px">
                    <el-input v-model="editUserInfoFrom.username" disabled clearable></el-input>
                  </el-form-item>
                  <el-form-item label="角色" labelWidth="6em" prop="roleId" style="width: 100%; margin-bottom: 30px">
                    <el-input v-model="editUserInfoFrom.roleName" disabled clearable></el-input>
                  </el-form-item>
                  <el-form-item label="真实姓名" labelWidth="6em" prop="realname" style="width: 100%; margin-bottom: 30px">
                    <el-input v-model="editUserInfoFrom.realname" :maxlength="realnameMax" placeholder="请输入真实姓名" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="性别" labelWidth="6em" prop="sex" style="width: 100%; margin-bottom: 30px">
                    <el-radio-group v-model="editUserInfoFrom.sex">
                      <el-radio label="男" :value="1"></el-radio>
                      <el-radio label="女" :value="2"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <div style="width: 100%">
              <el-button
                style="width: 100%"
                type="primary"
                :icon="IconEdit"
                :loading="editUserInfoLoading"
                :disabled="editUserInfoLoading"
                @click="submitEditUserInfo"
              >
                保存
              </el-button>
            </div>
          </div>
        </div>
        <!-- 修改密码 -->
        <div class="card-box global-slide-up-animation" style="animation-delay: 0.1s">
          <div class="title-box">
            <span class="title">修改密码</span>
          </div>
          <div class="content-box">
            <el-form ref="editPasswordFormRef" labelPosition="left" statusIcon :model="editPasswordForm" :rules="editPasswordRules" style="width: 100%">
              <div>
                <!-- 用于防止密码自动填充 -->
                <input style="position: absolute; top: -1vh; left: -1vw; z-index: -1; width: 0; height: 0; padding: 0" />
                <input type="password" style="position: absolute; position: absolute; top: -1vh; left: -1vw; z-index: -1; width: 0; height: 0; padding: 0" />
              </div>
              <el-form-item style="width: 100%; margin-bottom: 30px" required label="手机号" labelWidth="6em">
                <el-input :modelValue="userInfo?.phone" :prefixIcon="IconIphone" disabled></el-input>
              </el-form-item>
              <el-form-item label="验证码" labelWidth="6em" prop="smsCode" required style="margin-bottom: 30px">
                <base-input-count-down
                  ref="editPasswordPnputCountDownRef"
                  v-model="editPasswordForm.smsCode"
                  :senSmsCodeRequest="sendAuthCodeByUserAxios"
                ></base-input-count-down>
              </el-form-item>
              <el-form-item style="width: 100%; margin-bottom: 30px" prop="password" required label="新密码" labelWidth="6em">
                <el-input
                  v-model="editPasswordForm.password"
                  :prefixIcon="IconUnlock"
                  placeholder="请输入新密码"
                  showPassword
                  autocomplete="off"
                  type="password"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item prop="affirmPassword" style="width: 100%; margin-bottom: 30px" required label="确认密码" labelWidth="6em">
                <el-input
                  v-model="editPasswordForm.affirmPassword"
                  :prefixIcon="IconLock"
                  placeholder="请再次输入新密码"
                  showPassword
                  autocomplete="off"
                  :maxlength="passwordMax"
                  type="password"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 0">
                <el-button :loading="passdLoading" :disabled="passdLoading" type="primary" :icon="IconEdit" style="width: 100%" @click="submitEditPassword">
                  修改密码
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 修改手机号 -->
        <div class="card-box global-slide-up-animation" style="animation-delay: 0.1s">
          <div class="title-box">
            <span class="title">修改手机号</span>
          </div>
          <div class="content-box">
            <el-form ref="editPhoneFormRef" labelPosition="left" statusIcon :model="editPhoneForm" :rules="editPhoneRules" style="width: 100%">
              <el-form-item style="width: 100%; margin-bottom: 30px" required label="原手机号" labelWidth="6em">
                <el-input :modelValue="userInfo?.phone" :prefixIcon="IconIphone" disabled></el-input>
              </el-form-item>
              <el-form-item label="验证码" labelWidth="6em" prop="smsCode" required style="margin-bottom: 30px">
                <el-input
                  v-model="editPhoneForm.smsCode"
                  :formatter="(val: string) => val.replace(/[^\d]/, '')"
                  :parser="(val: string) => val.replace(/[^\d]/, '')"
                  type="text"
                  :prefixIcon="IconKey"
                  :maxlength="smsCodeLen"
                  autocomplete="off"
                  placeholder="请输入验证码"
                  clearable
                >
                  <template #append>
                    <base-count-down-button ref="oldEditPhoneCountDownRef" style="width: 120px" @click="oldEditPhoneSendSmsCode"></base-count-down-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item style="width: 100%; margin-bottom: 30px" prop="newPhone" required label="新手机号" labelWidth="6em">
                <el-input
                  v-model="editPhoneForm.newPhone"
                  :formatter="(val: string) => val.replace(/[^\d]/, '')"
                  :parser="(val: string) => val.replace(/[^\d]/, '')"
                  :maxlength="11"
                  placeholder="请输入绑定手机号"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item prop="newSmsCode" style="width: 100%; margin-bottom: 30px" required label="验证码" labelWidth="6em">
                <el-input
                  v-model="editPhoneForm.newSmsCode"
                  :formatter="(val: string) => val.replace(/[^\d]/, '')"
                  :parser="(val: string) => val.replace(/[^\d]/, '')"
                  type="text"
                  :prefixIcon="IconKey"
                  :maxlength="smsCodeLen"
                  autocomplete="off"
                  placeholder="请输入验证码"
                  clearable
                >
                  <template #append>
                    <base-count-down-button ref="newEditPhoneCountDownRef" style="width: 120px" @click="newEditPhoneSendSmsCode"></base-count-down-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 0">
                <el-button :loading="phoneLoading" :disabled="phoneLoading" type="primary" :icon="IconEdit" style="width: 100%" @click="submitEditPhone">
                  修改手机号
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <rest-image-cropper ref="restImageCropperRef"></rest-image-cropper>
  </base-load-page>
</template>

<script setup lang="ts">
  import IconEdit from '~icons/ep/edit';
  import IconIphone from '~icons/ep/iphone';
  import IconLock from '~icons/ep/lock';
  import IconKey from '~icons/ep/key';
  import IconUnlock from '~icons/ep/unlock';
  import type { UserInfo } from '@/api/login';
  import { useEditPassword } from './edit-password';
  import { useEditPhone } from './edit-phone';
  import { useEditUserInfo } from './edit-user-info';

  const userStore = useUserStore();
  const userInfo = computed<UserInfo | undefined>(() => userStore.userInfo);

  const { submitEditUserInfo, editUserInfoFormRef, editUserInfoLoading, editUserInfoFrom, realnameMax, restImageCropperRef, editUserInfoRules, openCropper } =
    useEditUserInfo(JSON.parse(JSON.stringify(userInfo.value!)));

  const {
    editPasswordFormRef,
    editPasswordRules,
    passwordMax,
    editPasswordForm,
    smsCodeLen,
    passdLoading,
    editPasswordPnputCountDownRef,
    sendAuthCodeByUserAxios,
    submitEditPassword,
  } = useEditPassword();

  const {
    editPhoneFormRef,
    oldEditPhoneCountDownRef,
    newEditPhoneCountDownRef,
    phoneLoading,
    editPhoneForm,
    editPhoneRules,
    submitEditPhone,
    newEditPhoneSendSmsCode,
    oldEditPhoneSendSmsCode,
  } = useEditPhone();
</script>

<style lang="scss" scoped>
  .main-box {
    @include flex(row, wrap, flex-start, stretch, stretch);
    margin-left: -20px;

    .card-box {
      @include flex(column, nowrap, flex-start, stretch, stretch);
      flex: 1;
      min-width: 360px;
      max-width: 100%;
      margin-bottom: 20px;
      margin-left: 20px;

      .title-box {
        padding: 5px;

        .title {
          font-size: calc(var(--my-change-base12-2x-size) + 2px);
          font-weight: bold;
          color: var(--el-text-color-regular);
        }
      }

      .content-box {
        @include flex(column, nowrap, flex-start, center, center);
        flex: 1;
        padding: 30px 20px;
        background: $c-bg-block;
        border-radius: 8px;
      }
    }
  }
</style>
